import { defineStore } from 'pinia'
import { reactive, toRefs } from 'vue'

interface Material {
  id: string
  name: string
  materialMap: Record<string, string>
  baseImageUrl: string
  frameImageUrl: string
  defaulted?: boolean
}

interface ExampleState {
  exampleMaterial: Material | null
  phoneModelId: string | null
}

export const useExampleStore = defineStore('example', () => {
    const state = reactive<ExampleState>({
      exampleMaterial: JSON.parse(localStorage.getItem('exampleMaterial') || 'null'),
      phoneModelId: localStorage.getItem('phoneModelId') || null
    })
  
    const setExampleMaterial = (material: Material) => {
      state.exampleMaterial = material
      localStorage.setItem('exampleMaterial', JSON.stringify(material))
    }
  
    const setPhoneModelId = (id: string) => {
      state.phoneModelId = id
      localStorage.setItem('phoneModelId', id)
    }
  
    return { 
      ...toRefs(state),
      setExampleMaterial,
      setPhoneModelId
    }
  })